import {  View } from "@tarojs/components";
import React, { Component } from "react";

import getColorByIndex from '../util/color'
import {emotionAnalysis} from '../api/data-analysis';
import Echarts from "./Echarts";
// eslint-disable-next-line import/first
import Taro from '@tarojs/taro'

export default class EmotionAnalysis extends Component{




setChartOptions(chart) {


  emotionAnalysis("2020-10-10","2020-11-10").then(res=> {
    console.log(res);
    const data = res.data.data;

    const total = res.data.data.reduce((all,item)=> {
      if(typeof all !=="number"){
        all = Number(all.y)
      }
      return all+Number(item.y)
    })
    console.log(total);


    var option = {
    tooltip: {
      trigger: 'item',
      formatter: "{a} \n {b}: {c} ({d}%)"
    },
      legend: {
      orient: 'vertical',
      top: 'middle',
        left: '60%',
        formatter: function (name) {
          const value = data.find(item => item.x === name);
          return name + '    ' + Math.round(Number(value.y) * 100 / total) +'%' ;
        },
      data: data.map(item => (item.x)),
        textStyle: {
        color:"auto",
        padding: [10, 0]
      }
    },
    series: [
      {
        name: '情感分析',
        type: 'pie',
        center: ['30%', '50%'],
        radius: ['40%', '59%'],
        // radius: '59%',
        // roseType:'radius',
        hoverOffset: 2,
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '15',
            fontWeight: 'bold',
          }
        },
        itemStyle: {
          color: function (param) {
            return getColorByIndex(param.dataIndex);
          }
        },
        labelLine: {
          normal: {
            show: false
          }
        },
        data: data.map(item =>( {
            name: item.x,
            value:item.y
        }))
      }
      ]

    };
  chart.setOption(option);

  })


  }




  render() {
      let height = Taro.pxTransform(350)
        return (
          <View>
              <View className='emotion-analysis'>
          <View className='caption emotion-analysis-caption'>
          情感分析
          </View>
          
        </View>  
            <Echarts setChartOptions={this.setChartOptions.bind(this)} height={height} />
            </View>
            )
        }
}
